<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		function show() {
			//1.创建xhr异步对象
			var xhr = new XMLHttpRequest();
			//2.创建请求,打开连接
			xhr.open("get", `/laptop_family/v1/laptop_family_search`, true);
			//3.发送请求
			xhr.send();
			//4.接收响应
			xhr.onreadystatechange = function () {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var r = xhr.responseText;
					if (r == 0) {
						alert("查询失败")
					} else {
						var arr = JSON.parse(r);
						var htmlStr = `
							<table border="1">
								<tr>
									<th>编号</th>
									<th>类别</th>
									<th>操作</th>
								</tr>
							`
						for (var i = 0; i < arr.length; i++) {
							htmlStr += `
								<tr>
									<td>${arr[i].fid}</td>
									<td>${arr[i].fname}</td>
									<td>
										<a href="laptop_family_search.html?fid=${arr[i].fid}">修改</a>
										<a href="javascript:del(${arr[i].fid})">删除</a>
									</td>
								</tr>
								`
						}
						htmlStr += `
								</table>
							`
						d1.innerHTML = htmlStr;
					}
				}
			}
		}
		function del($fid) {
			//0.收集填入信息
			// var $fid = fid.value;
			//非空验证
			// if (!$fid) {
			//     alert("编号不能为空");
			//     return;
			// }
			//1.创建xhr异步对象
			var xhr = new XMLHttpRequest();
			//2.创建请求,打开连接
			xhr.open("delete", `/laptop_family/v1/laptop_family_del/${$fid}`, true)
			//3.发送请求
			xhr.send();
			//4.接收响应
			xhr.onreadystatechange = function () {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var r = xhr.responseText;
					if (r == 1) {
						alert("删除成功")
						location.href = "laptop_family_get.html"
					} else {
						alert("删除失败")
					}
				}
			}

		}
	</script>
</head>

<body onload="show()">
	<div id="d1"></div>
</body>

</html>